<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <header class="app-header">
      <div class="header-container">
        <!-- Logo和标题 -->
        <div class="brand">
          <img
              src="../../public/imgs/login/leaf.png"
              alt="垃圾分类Logo"
              class="logo"
          >
          <h1 class="title">垃圾分类管理系统</h1>
        </div>

        <!-- 导航菜单 -->
        <nav class="nav-menu">
          <el-menu
              mode="horizontal"
              background-color="transparent"
              text-color="#666"
              active-text-color="#35984b"
              router
          >

            <el-menu-item index="/notice"><el-icon><Menu /></el-icon>新闻资讯</el-menu-item>

            <el-menu-item index="/garbage"><el-icon><DeleteFilled /></el-icon>垃圾分类</el-menu-item>

            <el-menu-item index="/points"><el-icon><Management /></el-icon>积分商城</el-menu-item>

            <el-menu-item index="/log"><el-icon><UserFilled /></el-icon>个人中心</el-menu-item>

          </el-menu>
        </nav>

        <!-- 登录信息 -->
        <el-button @click="toLogin" style="border-color: #35984b; background-color: #35984b; color:#fff;">
          登录
        </el-button>

      </div>
    </header>

    <!-- 主体内容区域 -->
    <main class="app-main">
      <router-view/>
    </main>

    <!-- 底部栏 -->
    <footer class="app-footer">
      <div class="footer-container">
        <div class="footer-content">
          <div class="footer-section about">
            <h3>关于我们</h3>
            <p>致力于推动提升全民垃圾分类管理意识。共建绿色环保家园，从正确分类垃圾开始。</p>
            <div class="contact">
              <span><el-icon><Phone /></el-icon> 400-123-4567</span>
              <span><el-icon><Message /></el-icon> garbage-system@163.com</span>
              <span><el-icon><Location /></el-icon> 云南 呈贡</span>
            </div>
          </div>

          <div class="footer-section links">
            <h3>快速链接</h3>
            <ul>
              <li><router-link to="/notice">新闻资讯</router-link></li>
              <li><router-link to="/garbage">垃圾分类指南</router-link></li>
              <li><router-link to="/points">积分商城</router-link></li>
              <li><router-link to="/log">个人中心</router-link></li>
            </ul>
          </div>
        </div>

        <div class="footer-bottom">
          <p>&copy; 2025 基于Springboot+Vue的垃圾分类管理系统 版权所有 | 1024组</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import {ref, computed, onMounted, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {
  Menu,
  Delete,
  User,
  ArrowDown,
  SwitchButton
} from '@element-plus/icons-vue'

const route = useRoute();
const router = useRouter();

const toLogin = () => {
  router.push('/login');
}

</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.app-header {
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;

  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;

  .logo {
    height: 36px;

    &:hover {
      transform: rotate(-15deg);
    }
  }

  .title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #35984b;
    background: linear-gradient(to right, #35984b, #4caf50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.nav-menu {
  flex: 1;
  margin: 0 20px;

  :deep(.el-menu) {
    border-bottom: none;
  }

  :deep(.el-menu--horizontal) {
    display: flex;
    justify-content: center;
  }

  :deep(.el-sub-menu__title),
  :deep(.el-menu-item) {
    height: 60px;
    font-size: 15px;
    color: #666;
    transition: all 0.3s;

    &:hover {
      color: #35984b !important;
      background-color: rgba(53, 152, 75, 0.05) !important;
    }

    .el-icon {
      margin-right: 5px;
    }
  }

  :deep(.el-menu-item.is-active) {
    color: #35984b !important;
    font-weight: 500;
    border-bottom: 2px solid #35984b;
  }
}

.user-info {
  .user-panel {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;

    .username {
      font-size: 16px;
      color: #666;
      margin-right: 5px;
    }

    .dropdown-icon {
      font-size: 12px;
      color: #999;
    }
  }

  &:hover .dropdown-icon {
    transform: rotate(180deg);
  }
}

.app-main {
  flex: 1;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* 页面过渡动画 */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .brand .title {
    display: none;
  }

  .nav-menu {
    margin: 0 10px;

    :deep(.el-sub-menu__title span),
    :deep(.el-menu-item span) {
      display: none;
    }
  }

  .user-info .username {
    display: none;
  }
}

/* 底部栏样式 */
.app-footer {
  background-color: #444444;
  color: #ecf0f1;
  padding: 40px 0 20px;
  margin-top: auto;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 修改为居中 */
  margin-bottom: 30px;
  gap: 40px; /* 添加间距 */
}

.footer-section {
  flex: 0 1 auto; /* 修改flex属性 */
  min-width: 250px;
  margin-bottom: 20px;
  padding: 0 30px;
}

.footer-section h3 {
  color: #35984b;
  margin-bottom: 20px;
  font-size: 18px;
  position: relative;
  padding-bottom: 10px;
}

.footer-section h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 2px;
  background: #35984b;
}

.footer-section.about p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.contact span {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
}

.contact .el-icon {
  margin-right: 8px;
  color: #35984b;
}

.footer-section.links ul {
  list-style: none;
  padding: 0;
  display: inline-block; /* 使ul可以居中 */
  text-align: left; /* 列表内容左对齐 */
}

.footer-section.links li {
  margin-bottom: 10px;
}

.footer-section.links a {
  color: #bdc3c7;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section.links a:hover {
  color: #35984b;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #666;
  font-size: 14px;
  color: #bdc3c7;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .footer-section {
    width: 100%;
    max-width: 300px;
  }

  .footer-section.links ul {
    text-align: center;
  }
}
</style>